<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-row :gutter="20">
        <el-col :span="12" style="padding-top: 5px;padding-bottom: 5px;">
          <div style="background: #fff;padding: 5px">
            <span style="font-size: 19px;color: #C03639">全部信息</span>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  订单总量：{{ totalStatics.totalOrderCount }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  订单总额：{{ totalStatics.totalOrderFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  支付金额：{{ totalStatics.totalOrderPayFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  免单金额：{{ totalStatics.totalOrderFreeFee }}
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  充值人数：{{ totalStatics.totalCzUserCount }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  押金总额：{{ totalStatics.totalDespoistFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  设备总数：{{ totalStatics.totalDeviceCount }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  投放总数：{{ totalStatics.totalDeviceTfCount }}
                </el-card>
              </el-col>
            </el-row>
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">医院信息</span>
            </div>
            <el-table ref="totalHospital" :data="hospitalTotal" style="width: 100%;" border>
              <el-table-column prop="showName" label="医院名称" :show-overflow-tooltip="true" />
              <el-table-column prop="orderCount" label="订单量" :show-overflow-tooltip="true" />
              <el-table-column prop="orderFee" label="订单总额" :show-overflow-tooltip="true" />
              <el-table-column prop="payFee" label="已支付金额" :show-overflow-tooltip="true" />
              <el-table-column prop="deviceCount" label="设备数量" :show-overflow-tooltip="true" />
              <el-table-column label="操作" width="130px" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text">
                    <router-link :to="'/hospital/statics/' + scope.row.showId">医院统计</router-link>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="width: 100%;height: 20px;background-color: rgb(240, 242, 245)" />
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="font-size: 19px;color: #C03639">当天信息</span>
            </div>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  订单量：{{ todayStatics.todayOrderCount }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  订单金额：{{ todayStatics.todayOrderFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  支付金额：{{ todayStatics.todayOrderPayFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  免单金额：{{ todayStatics.todayOrderFreeFee }}
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 10px">
              <el-col :span="6">
                <el-card shadow="always">
                  押金收取：{{ todayStatics.todayDespoistFee }}
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="always">
                  充值租户：{{ todayStatics.todayCzUserCount }}
                </el-card>
              </el-col>
            </el-row>
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">医院信息</span>
            </div>
            <el-table ref="todayHospital" :data="hospitalToday" style="width: 100%;" border>
              <el-table-column prop="showName" label="医院名称" :show-overflow-tooltip="true" />
              <el-table-column prop="orderCount" label="订单量" :show-overflow-tooltip="true" />
              <el-table-column prop="orderFee" label="订单总额" :show-overflow-tooltip="true" />
              <el-table-column prop="payFee" label="已支付金额" :show-overflow-tooltip="true" />
            </el-table>
          </div>
        </el-col>
        <el-col :span="12" style="padding-top: 5px;padding-bottom: 5px">
          <div style="background: #fff;padding: 5px">
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">订单走势</span>
            </div>
            <div id="orderLineChart" style="width: 90%;height: 30vh;" />
            <div style="margin-top: 20px;margin-bottom: 10px">
              <span style="color: #C03639;font-size: 15px;">充值用户走势</span>
            </div>
            <div id="userCzLineChart" style="width: 90%;height: 30vh;" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTotal, getTodayTotal, getHospitalTotal, getHospitalToday, getOrderTotalLine, getUserTotalLine } from '@/api/business/statics/statics'
import echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      totalStatics: {},
      todayStatics: {},
      hospitalTotal: [],
      hospitalToday: []
    }
  },
  created() {
    this.getTotalStatics()
    this.getTodayTotalStatics()
    this.getHospitalTotalStatics()
    this.getHospitalTodayStatics()
  },
  mounted() {
    this.getTotalOrderLineStatics()
    this.getUserTotalLineStatics()
  },
  methods: {
    getTotalStatics() {
      getTotal().then((data) => {
        this.totalStatics = data
      })
    },
    getHospitalTotalStatics() {
      getHospitalTotal().then((data) => {
        this.hospitalTotal = data
      })
    },
    getTotalOrderLineStatics() {
      getOrderTotalLine().then((data) => {
        this.initOrderLineChart(data)
      })
    },
    getUserTotalLineStatics() {
      getUserTotalLine().then((data) => {
        this.initCzUserLineChart(data)
      })
    },
    getTodayTotalStatics() {
      getTodayTotal().then((data) => {
        this.todayStatics = data
      })
    },
    getHospitalTodayStatics() {
      getHospitalToday().then((data) => {
        this.hospitalToday = data
      })
    },
    initOrderLineChart(data) {
      const dateArray = []
      const orderCountArray = []
      const orderFeeArray = []
      const orderPayArray = []
      data.forEach((item, i) => {
        dateArray.push(item.dateShow)
        orderCountArray.push(item.orderCount)
        orderFeeArray.push(item.orderFee)
        orderPayArray.push(item.payFee)
      })

      const orderLineChart = echarts.init(document.getElementById('orderLineChart'))
      // 使用刚指定的配置项和数据显示图表。
      orderLineChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['订单金额', '支付金额', '订单量'] },
        color: ['#8AE09F', '#330066', '#ff0000'],
        xAxis: { // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: dateArray,
          name: '日期', // X轴 name
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }}
        },
        yAxis: [{
          name: '订单量',
          nameTextStyle: { color: '#FA6F53', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        },
        {
          name: '金额/元',
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        }
        ],
        series: [
          {
            name: '订单金额',
            yAxisIndex: 1,
            data: orderFeeArray,
            type: 'line', // 类型为折线图
            lineStyle: { normal: { color: '#8AE09F' }}
          },
          {
            name: '支付金额',
            yAxisIndex: 1,
            data: orderPayArray,
            type: 'line',
            lineStyle: { normal: { color: '#330066' }}
          },
          {
            name: '订单量',
            data: orderCountArray,
            type: 'line',
            lineStyle: { normal: { color: '#ff0000' }}
          }
        ]
      })
    },
    initCzUserLineChart(data) {
      const dateArray = []
      const countArray = []
      data.forEach((item, i) => {
        dateArray.push(item.dateShow)
        countArray.push(item.czUserCount)
      })

      const userLineChart = echarts.init(document.getElementById('userCzLineChart'))
      // 使用刚指定的配置项和数据显示图表。
      userLineChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['用户数量'] },
        color: ['#8AE09F'],
        xAxis: { // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: dateArray,
          name: '日期', // X轴 name
          nameTextStyle: { color: '#1C1C1C', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }}
        },
        yAxis: [{
          name: '用户数量',
          nameTextStyle: { color: '#FA6F53', fontSize: 16, padding: [0, 0, 0, 0] },
          axisLine: { lineStyle: { color: '#1C1C1C' }},
          type: 'value'
        }
        ],
        series: [
          {
            name: '用户数量',
            data: countArray,
            type: 'line', // 类型为折线图
            lineStyle: { normal: { color: '#8AE09F' }}
          }
        ]
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    height: 100%;
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>
